<template>
  <div>
    <div
      style="
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #eceef4;
        margin-bottom: 20px;
      "
    >
      <h3>商品分类</h3>
      
    </div>
    <el-form>
      <el-form-item label="店铺名称" style="margin-top: 20px">
        <el-input
          style="width: 350px; margin-left: 11px"
          v-model="shopdata.name"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品公告" style="margin-top: 20px">
        <el-input
          rows="8"
          type="textarea"
          style="width: 350px; margin-left: 11px"
          v-model="shopdata.bulletin"
        ></el-input>
      </el-form-item>
      <div style="display: flex">
        <span>店铺头像</span>
        <!-- 头像 -->
        <el-upload
          class="avatar-uploader"
          action="http://127.0.0.1:5000/shop/upload"
          :show-file-list="false"
          :on-success="avatarsuccess"
          style="margin-left: 10px"
        >
          <img :src="shopdata.avatar" class="avatar" />
        </el-upload>
      </div>

      <div style="display: flex; margin-top: 10px">
        <span>店铺图片</span>
        <!-- 照片墙 -->
        <el-upload
          :file-list="fileList"
          action="http://127.0.0.1:5000/shop/upload"
          :on-success="picscardsuccess"
          :on-remove="picscardremove"
          list-type="picture-card"
          style="margin-left: 10px"
        >
          <i class="el-icon-plus"></i>
          <!-- <img width="50px" :src="shopdata.pics" alt="" /> -->
        </el-upload>
      </div>

      <el-form-item label="配送费" style="margin-top: 20px">
        <el-input
          style="width: 350px; margin-left: 11px"
          v-model="shopdata.deliveryPrice"
        ></el-input>
      </el-form-item>
      <el-form-item label="配送时间">
        <el-input
          style="width: 350px"
          v-model="shopdata.deliveryTime"
        ></el-input>
      </el-form-item>
      <el-form-item label="蜂鸟配送">
        <el-input
          style="width: 350px"
          v-model="shopdata.description"
        ></el-input>
      </el-form-item>
      <el-form-item label="店铺评分">
        <el-input
          disabled
          style="width: 350px"
          v-model="shopdata.score"
        ></el-input>
      </el-form-item>
      <el-form-item label="销量">
        <el-input
          style="width: 350px; margin-left: 27px"
          v-model="shopdata.sellCount"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="活动">
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            v-for="item in shopdata.supports"
            :key="item"
            :label="item"
            :value="item"
          ></el-checkbox>
        </el-checkbox-group>
        <el-input
          style="width: 350px"
          v-model="addcheckboxname"
          placeholder="添加商品的活动"
        ></el-input>
        <el-button style="margin-left: 20px" @click="funaddname"
        type="primary"
          >添加活动</el-button
        >
      </el-form-item>

      <div>
        <span>营业时间</span>
        <el-time-picker
          is-range
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="shopdata.date"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
          style="margin-left: 10px"
        >
        </el-time-picker>
      </div>
      <el-button type="primary" @click="funedit" style="margin-left:500px;margin-top:20px">添加商品</el-button>
    </el-form>
  </div>
</template>

<script>
import { shopinfo , shopedit} from "@/apis/shop";

export default {
  data() {
    return {
      shopdata: "",
      fileList: [], //回填照片墙
      dialogImageUrl: "",
      dialogVisible: false,
      checkList: [],
      pics: [],
      addcheckboxname: "",
      picslist: [], //所有图片的名称数组
    };
  },
  created() {
    shopinfo().then((res) => {
      console.log(res);
      this.shopdata = res.data.data;
      //回填复选框
      this.checkList = JSON.parse(JSON.stringify(this.shopdata.supports));

      //回填照片数据
      this.fileList = this.shopdata.pics.map((url) => {
        let imgname = url.substring(url.lastIndexOf("/") + 1);
        this.picslist.push(imgname);
        return {
          name: imgname,
          url,
        };
      });
      // console.log(this.fileList);
    });
  },
  methods: {
    //添加活动
    funaddname() {
      this.shopdata.supports.push(this.addcheckboxname);
    },
    //头像上传成
    avatarsuccess(res) {
      let oldurl = this.shopdata.avatar;
      //拼接新头像地址
      this.shopdata.avatar =
        oldurl.substring(0, oldurl.lastIndexOf("/") + 1) + res.imgUrl;

      console.log(res);
    },

    //照片墙图片上传成功
    picscardsuccess(res) {
      this.picslist.push(res.imgUrl);
      console.log(res);
    },
    //照片墙移除一张照片
    picscardremove(file) {
      // console.log(file);
      let imgUrl = file.response ? file.response.imgUrl : file.name;

      for (let i = 0; i < this.picslist.length; i++) {
        if (imgUrl == this.picslist[i]) {
          this.picslist.splice(i, 1);
          break;
        }
      }
    },
    funedit() {
      //先获取传统数据
      let {
        id,
        name,
        bulletin,
        avatar,
        deliveryPrice,
        deliveryTime,
        description,
        score,
        sellCount,
      } = this.shopdata;

      let data = {
        id,
        name,
        bulletin,
        avatar: avatar.substring(avatar.lastIndexOf("/") + 1),
        deliveryPrice,
        deliveryTime,
        description,
        score,
        sellCount,
        supports: JSON.stringify(this.shopdata.supports),
        date: JSON.stringify(this.shopdata.date),
        pics: JSON.stringify(this.picslist),
      };
     shopedit(data).then(res=>{
       console.log(res);
     })
    },
  },
};
</script>

<style lang="less">
.el-main[data-v-fae5bece] {
  text-align: left;
  line-height: 30px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
</style>